<%--
  Created by IntelliJ IDEA.
  User: cyrus
  Date: 2021/07/30
  Time: 14:13
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>ajax</title>
    <script src="${pageContext.request.contextPath}/resources/js/jquery-2.1.1.min.js"></script>
</head>
<body>
<script>
    // 发送http请求
    // 用来发送http请求的
    var xmlRequest = new XMLHttpRequest();
    // 连接方式：get 和 post请求
    // 连接地址 url
    xmlRequest.open("get", "${pageContext.request.contextPath}/ajax");
    // 请求成功的处理
    // 请求状态发生变化的回调函数
    // 异步问题的解决
    //      1. 回调函数
    //      2. Promise
    //      3. async/await
    xmlRequest.onreadystatechange = function () {
        if (xmlRequest.readyState == 4) {
            // 这个状态就代表请求车工
            if (xmlRequest.status == 200) {
                // 接口成功
                // 最终返回的数据
                console.log(xmlRequest.responseText)
            }else {
                // 有点问题
            }
        }
    }
    // 发送请求
    xmlRequest.send();

    // jquery的ajax本质是基于XMLHttpRequest进行的封装
    $.ajax({
        url: "${pageContext.request.contextPath}/ajax",
        type: "get",
        data:{
          name:"测试"
        },
        success(res) {
            console.log("===================jquery的ajax===================");
            console.log(res)
        }
    });

    // 发送json
    var json = {
        name : '李白'
    }
    // json请求
    <%--$.ajax({--%>
    <%--    url: "${pageContext.request.contextPath}/ajax",--%>
    <%--    type: "post",--%>
    <%--    data: JSON.stringify(json),--%>
    <%--    contentType: "application/json;charset=utf-8",--%>
    <%--    success(res) {--%>
    <%--        console.log(res)--%>
    <%--    }--%>
    <%--})--%>
    // 普通表单
    <%--$.ajax({--%>
    <%--    url: "${pageContext.request.contextPath}/ajax",--%>
    <%--    type: "post",--%>
    <%--    data: {--%>
    <%--        name:"普通表达"--%>
    <%--    },--%>
    <%--    // contentType: "application/json;charset=utf-8",--%>
    <%--    success(res) {--%>
    <%--        console.log(res)--%>
    <%--    }--%>
    <%--})--%>

    // var form = new FormData();


</script>
</body>
</html>
